import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

// axios 是不需要使用 Vue.use() 方法, 因为axios并不是vue中的模块
import axios from "axios"

// 1.axios的基本使用
// axios有很多种请求方式, 默认的请求方式为get请求
axios({
  url : "http://152.136.185.210:8000/api/w6/home/data",
  // 可以通过 method 属性来指定请求方式
  // method : "post",

  // 如果使用get请求的话, 如果带有参数的话, 需要拼接到url上, 这样会导致url很长, 所以axios提供了一个parmas对象, 用于参数的拼接
  params : {
    type : "pop",
    page : 1
  }
}).then((res) => {
  // axios 在网络请求操作完成之后会返回一个 new Promise 对象, 所以这里可以使用then 和catch
  console.log(res);
}).catch((err) => {
  console.log(err);
})

// 2.axios处理并发请求
// 如果我们需要多个网络请求完成后才能继续后面的操作的话
// axios提供了一个 axios.all() 方法, 用于处理这种需求
// 这个方法里面传入一个数组, 数组中传入axios请求
// 在axios请求都完成后, axios.all() 方法会调用then(), then()中传入一个函数, 函数中有一个result参数
// result是一个数组, 数组中第一个数据即是第一个axios请求返回的数据, 依此类推
// 如果想要将各个返回的数据分开的话, then() 中还可以传入一个 axios.spread() 方法, 方法中传入一个函数
// 该函数的参数就是对应的axios请求返回的数据
// 看以下实例代码

axios.all([
  axios({
    url : "http://123.207.32.32:8000/home/multidata"
  }),
  axios({
    url : "http://152.136.185.210:8000/api/w6/home/data",
    params : {
      type : "pop",
      page : 5
    }
  })
])
/* .then((result => {
  // 这里的result是一个数组, 里面按顺序存放了各个axios请求返回的数据
  console.log(result);
  console.log(result[0]);
  console.log(result[1]);
})) */
.then(axios.spread((res1, res2)=> {
  // 通过 axios.spread() 将各个axios请求返回的数据, 分开
  console.log(res1);
  console.log(res2);
}))
.catch(err => {
  console.log(err);
})

// 3. 全局配置信息
// 其实我们的请求中有很多东西都是相同的, 比如url中的baseURL, 和设置的请求超时时间等等
// 如果我们每次请求都要重写这些config, 这样代码就很重复了
// 所以我们会将固定的参数抽取出来
// axios提供了一个 defaults 对象用于进行全局配置
// 看以下代码实例

axios.defaults.baseURL = "http://152.136.185.210:8000/api/w6" // 这里设置了baseURL
axios.defaults.timeout = 5000  // 这里设置了请求超时时间
axios.all([
  axios({
    url : "/home/multidata"
  }),
  axios({
    url : "/home/data",
    params : {
      type :"pop",
      page : 2
    }
  })
]).then(axios.spread((res1, res2)=> {
  // 通过 axios.spread() 将各个axios请求返回的数据, 分开
  console.log(res1);
  console.log(res2);
}))
.catch(err => {
  console.log(err);
})

// 4. 创建axios实例
// 在实际开发中, 很有可能会遇到这种状况
// 网络请求的baseURL是不一样的, 或者说不同的网络请求设置的请求超时时间是不一样的
// 这个时候, 如果我们还是使用全局配置的 axios.default 就无法正确地请求正确的数据了
// 所以我们要创建axios实例
// 创建axios实例, 通过axios.create创建
// 看以下代码实例

// 比如这里的网络请求, 需要设置的请求超时时间为 5000毫秒
const instans1 = axios.create({
  // 在这里设置配置
  baseURL : "http://152.136.185.210:8000/api/w6",
  timeout : 5000
})
// 在这里使用axios实例
// 与全局中使用axios基本一致
instans1({
  url : "/home/multidata"
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

// 比如这里需要设置请求超时时间为10000
const instans2 = axios.create({
  baseURL : "http://152.136.185.210:8000/api/w6",
  timeout : 10000
})
// 在这里使用instans2进行网络请求
instans2({
  url : "/home/data",
  params : {
    type :"pop",
    page : 2
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

